<template>
	<view class="container">
		<view class="header">
			<view class="arrow" @tap="$back()"><image src="../../static/images/arrow_left.png" mode="aspectFit"></image></view>
			<view class="tit f36 cfff">个人资料</view>
			<view class="btn f32 cfff" @tap="$open('./profileediting')">修改</view>
		</view>
		
		<view class="personBox">
			<view class="person-item">
				<view class="left">
				<view class="name f30 c666">您的姓名</view>
				<view class="text f30 c333">亦媛</view>
				</view>
				<view class="arrow"><image src="../../static/images/arrow_right.png" mode="aspectFit"></image></view>
			</view>
			<view class="person-item">
				<view class="left">
				<view class="name f30 c666">手机号</view>
				<view class="text f30 c333">182888888</view>
				</view>
				<view class="arrow"><image src="../../static/images/arrow_right.png" mode="aspectFit"></image></view>
			</view>
			<view class="person-item">
				<view class="left">
				<view class="name f30 c666">收货地址</view>
				<view class="text f30 c333">江苏省徐州魔偶某某</view>
				</view>
				<view class="arrow"><image src="../../static/images/arrow_right.png" mode="aspectFit"></image></view>
			</view>
		</view>
		
	</view>
</template>

<script>
</script>

<style lang="scss">
	.header{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #249AF6;
		padding: 60upx 30upx 25upx 30upx;
		.arrow{
			image{
				width: 20upx;
				height: 40upx;
			}
		}
	}
	.personBox{
		border-top: 30upx #F5F5F5 solid;
		.person-item{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 35upx 30upx;
			background-color: $white-background;
			border-bottom: 2upx #eee solid;
			.left{
				position: relative;
				.name{
					position: absolute;
					left: 0;
				}
				.text{
					padding-left:160upx;
					padding-right: 20upx;
				}
				
			}
			.arrow{
				image{
					width: 20upx;
					height: 35upx;
				}
			}
		}
	}
</style>
